<template>
  <div class="page">
    <div class="draggable-container">
      <DraggableArea ref="draggableRef">
        <div class="draggable-item">拖拽内容</div>
      </DraggableArea>
    </div>
    <button @click="draggableRef?.handleAlignTop">向上对齐</button>
    <button @click="draggableRef?.handleAlignBottom">向下对齐</button>
    <button @click="draggableRef?.handleAllAlignCenter">居中</button>
    <button @click="draggableRef?.handleMagnify">放大</button>
    <button @click="draggableRef?.handleLessen">缩小</button>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import DraggableArea from './components/DraggableArea.vue'
const draggableRef = ref()
</script>
<style lang="scss" scoped>
@import url('./index.scss');
</style>
